<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            clear: both;
            overflow: hidden;
        }
        
        #box div {
            width: 50px;
            height: 50px;
            background-color: #333;
            float: left;
            margin: 20px 5px;
            text-align: center;
            line-height: 50px;
            font-size: 28px;
            color: #fff;
        }
        
        #last {
            clear: right;
        }
        
        button {
            display: block;
        }
    </style>
</head>

<body>
    <h1>距离双11还剩</h1>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <br>
    <br>
    <div>
        <button>停止计时</button>
    </div>

    <br>
    <br>
    <form action="">
        <input type="text">
        <input type="button" value="发送">
    </form>

</body>

<script>
    // 用JavaScript写的
    // var box = document.getElementById('box');
    // var divs = box.querySelectorAll('div')
    // var time = setInterval(countTimes,1000)
    // var but = document.querySelector('button')
    // but.onclick = function(){
    //     window.clearInterval(time)
    // }
    // function countTimes(){
    //     var now = new Date
    //     var endTime = new Date(2024,11,11)
    //     var times = parseInt((endTime-now)/1000)
    //     var days = parseInt(times/60/60/24)
    //     var hours = parseInt(times/60/60%24)
    //     var minutes = parseInt(times/60%60)
    //     var seconds = parseInt(times%60)

    //     days = days < 10 ?'0'+days:days 
    //     hours = hours < 10 ?'0'+hours:hours 
    //     minutes = minutes < 10 ?'0'+minutes:minutes 
    //     seconds = seconds < 10 ?'0'+seconds:seconds 

    //     divs[0].innerHTML = days;
    //     divs[1].innerHTML = hours;
    //     divs[2].innerHTML = minutes;
    //     divs[3].innerHTML = seconds;
    // }
    // inputs = document.querySelectorAll('input')
    // var t = 3
    // inputs[1].addEventListener('click',function () {
        
    //     this.disabled = true
    //     var timer = setInterval(function(){
    //         if (t==0) {
    //             clearInterval(timer)
    //             inputs[1].disabled = false
    //             inputs[1].value = '发送'
    //             t=3
    //         }else{
    //             inputs[1].value = '还剩下'+t+'秒'
    //             t--
    //             console.log(1);
                
    //         }
    //     },1000)
    // })



    //用jQuery写的
    $(document).ready(function() {
        var $box = $('#box');
        var $divs = $box.find('div');
        var time = setInterval(countTimes, 1000);
        var $button = $('button');

        $button.on('click', function() {
            clearInterval(time);
        });

        function countTimes() {
            var now = new Date();
            var endTime = new Date(2024, 9, 24);
            var times = parseInt((endTime - now) / 1000);
            var days = parseInt(times / 60 / 60 / 24);
            var hours = parseInt(times / 60 / 60 % 24);
            var minutes = parseInt(times / 60 % 60);
            var seconds = parseInt(times % 60);

            days = days < 10 ? '0' + days : days;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            $divs.eq(0).text(days);
            $divs.eq(1).text(hours);
            $divs.eq(2).text(minutes);
            $divs.eq(3).text(seconds);
        }

        var $inputs = $('input');
        var t = 3;
        $inputs.eq(1).on('click', function() {
            var $this = $(this);
            $this.prop('disabled', true);
            var timer = setInterval(function() {
                if (t == 0) {
                    clearInterval(timer);
                    $this.prop('disabled', false);
                    $this.val('发送');
                    t = 3;
                } else {
                    $this.val('还剩下' + t + '秒');
                    t--;
                    console.log(1);
                }
            }, 1000);
        });
    });

</script>

</html>